<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>
div{width:200px;height:300px;border:1px solid #ddd;}
</style>
<script src="../第十三章事件/eventObject.js" type="text/javascript"></script>
</head>

<body>
	<form id="myForm"  method="post" name="form1" action="http://www.baidu.com" novalidate='true'>
    	<select name="location" id="selLocation">
        	<option>8888</option>
        </select>
        
    </form>
    <script> 
		
		//第一种添加选项的方式(DOM方法)
		var selectbox=document.forms[0].elements['location'];
		
		/*var newOption=document.createElement('option');
		
		var textNode=document.createTextNode('option text');
		
		//设置它的value特性
		newOption.setAttribute('value','option value');
		
		newOption.appendChild(textNode);
		
		selectbox.appendChild(newOption);*/
		
		//第二种添加选项的方式(使用Option构造函数);IE8-不能显示新选项的文本
		/*var newOption=new Option('option text', 'option value');
		
		selectbox.appendChild(newOption);*/
		
		//第三种添加新选项的方法（使用选择框的add(要添加的新选项, 新选项之后的选项)方法）；
		var newOption=new Option('option text', 'option value');
		
		//null IE7-不兼容
		//selectbox.add(newOption, null);
		
		//selectbox.add(newOption, undefined);
		
		selectbox.insertBefore(newOption, selectbox.options[0]);
		
		
		
		
    </script>
    
</body>
</html>
